<template>
  <div>
    <!-- 收费项管理 -->
    <el-form ref="SearchForm" :model="SearchForm" label-width="60px">
      <el-row>

        <el-col :span="7">
          <el-form-item label="类型：" label-width="80px">
            <el-select v-model="SearchForm.searchByItemType" placeholder="请选择" style="width:230px">
              <el-option v-for="key in typeKeys" :key="key" :label="key" :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="收费项目名：" label-width="100px">
            <el-input placeholder="请输入收费项目名" v-model="SearchForm.searchByItemName" />
          </el-form-item>
        </el-col>

        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="searchMassage" icon="el-icon-search">搜索</el-button>
          </el-form-item>
        </el-col>

        <el-col :span="3">
          <el-form-item>
            <el-button @click="resetFields" icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 添加收费项目对话框 -->
    <el-button type="primary" @click="beforeAddOwnerUser" icon="el-icon-plus">新建</el-button>

    <el-dialog title="新建" :visible.sync="dialogFormVisible" style="font-weight:bold">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">

        <el-form-item label="类型" prop="ItemType">
          <el-select v-model="ruleForm.ItemType" placeholder="请选择">
            <el-option v-for="key in typeKeys" :key="key" :label="key" :value="key">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="收费项目名" prop="ItemName">
          <el-input v-model="ruleForm.ItemName" placeholder="请输入收费项目"></el-input>
        </el-form-item>
        <!-- 单价、数量、费用周期、计算公式、是否产生滞纳金 -->
        <el-form-item label="单价" prop="price">
          <el-input v-model="ruleForm.price" placeholder="请输入单价"></el-input>
        </el-form-item>

        <el-form-item label="计数类型" prop="numType">
          <el-select v-model="ruleForm.numType" placeholder="请选择">
            <el-option v-for="key in mapKeys" :key="key" :label="key" :value="key">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="费用周期" prop="period">
          <el-input v-model="ruleForm.period" placeholder="请输入周期"></el-input>
        </el-form-item>

        <el-form-item label="是否产生滞纳金" prop="lateFeeEnable">
          <el-radio-group v-model="ruleForm.lateFeeEnable">
            <el-radio label="1">试用</el-radio>
            <el-radio label="0">不适用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="margin-top:30px;margin-left:400px">
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="dialogFormVisible = false
          ">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 数据展示--表格 -->
    <el-table :data="tableData" border style="width: 100%;border-radius: 10px; margin-top: 10px" :header-cell-style="{
          background: '#1890ff',
          color: 'white',
          'text-align': 'center',
        }" :cell-style="{
          'text-align': 'center',
        }">
      <el-table-column type="index" label="序号" align="center">
      </el-table-column>
     
      <el-table-column prop="type" label="类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 'house'">商铺</span>
          <span v-if="scope.row.type == 'temp'">临时收费</span>
          <span v-if="scope.row.type == 'deposit'">押金</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="收费项目名" align="center">
      </el-table-column>
      <el-table-column prop="price" label="单价" align="center">
      </el-table-column>
      <el-table-column prop="numType" label="数量" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.numType == 'rent_fee'">按租金收费</span>
          <span v-if="scope.row.numType == 'building_area'">按占地面积收费</span>
          <span v-if="scope.row.numType == 'flat'">按走表量收费</span>
          <span v-if="scope.row.numType == 'meter'">按户数收费</span>
          <span v-if="scope.row.numType == ''">按户数收费</span>
        </template>
      </el-table-column>

      <el-table-column prop="formula" label="计算公式" align="center" >
        <template slot-scope="scope">
          <span v-if="scope.row.formula == 'base'">单价 * 数量</span>
          <span v-if="scope.row.formula == ''">单价 * 数量</span>
          <span v-if="scope.row.formula == 'expression'">自定义</span>
        </template>

      </el-table-column>

      <el-table-column prop="period" label="计算周期" align="center">
        <template slot-scope="scope">
          {{ scope.row.period }}个月
        </template>
      </el-table-column>

      <el-table-column prop="lateFeeEnable" label="滞纳金" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.lateFeeEnable == '0'">不适用</span>
          <span v-if="scope.row.lateFeeEnable == '1'">适用</span>
        </template>
      </el-table-column>
      <el-table-column prop="lateFeeRate" label="滞纳金比例" align="center">
      </el-table-column>
      <el-table-column prop="lateFeeDays" label="滞纳金天数" align="center">
      </el-table-column>
      <el-table-column prop="name" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="beroreSubmitModifyForm(scope.row);dialogModifyVisible = true" size="small">编辑</el-button>
          <el-button type="text" @click="beforeDeleteItemById(scope.row)" size="small" style="color:#FF6459">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑" :visible.sync="dialogModifyVisible" style="font-weight:bold">
      <el-form :model="ruleModifyForm" :rules="rules" ref="ruleModifyForm" label-width="120px" class="demo-ruleForm">

        <el-form-item label="类型" prop="ItemType">
          <el-select v-model="ruleModifyForm.type" placeholder="请选择">
            <el-option v-for="key in typeKeys" :key="key" :label="key" :value="key">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="收费项目名" prop="ItemName">
          <el-input v-model="ruleModifyForm.name" placeholder="请输入收费项目"></el-input>
        </el-form-item>
        <!-- 单价、数量、费用周期、计算公式、是否产生滞纳金 -->
        <el-form-item label="单价" prop="price">
          <el-input v-model="ruleModifyForm.price" placeholder="请输入单价"></el-input>
        </el-form-item>

        <el-form-item label="计数类型" prop="numType">
          <el-select v-model="ruleModifyForm.numType" placeholder="请选择">
            <el-option v-for="key in mapKeys" :key="key" :label="key" :value="key">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="费用周期" prop="period">
          <el-select v-model="ruleModifyForm.period" placeholder="请选择">
            <el-option v-for="key in periodMapKeys" :key="key" :label="key" :value="key">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否产生滞纳金" prop="lateFeeEnable">
          <el-radio-group v-model="ruleModifyForm.lateFeeEnable">
            <el-radio label="1">试用</el-radio>
            <el-radio label="0">不适用</el-radio>
          </el-radio-group>

        </el-form-item>

        <el-form-item label="滞纳金比例" v-if="ruleModifyForm.lateFeeEnable == '1'">
          <el-input v-model="ruleModifyForm.lateFeeRate" placeholder="请输入比例">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>

        <el-form-item label="滞纳金天数" v-if="ruleModifyForm.lateFeeEnable == '1'">
          <el-input v-model="ruleModifyForm.lateFeeDays" placeholder="请输入单价"></el-input>
        </el-form-item>

        <el-form-item style="margin-top:30px;margin-left:400px">
          <el-button type="primary" @click="submitModifyForm">确定</el-button>
          <el-button @click="dialogModifyVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10,15,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>

</template>

<script>
export default {
  data() {
    return {
      // 获取列表展示数据
      url_Get_getConfigFeeItemList:
        "http://localhost:8080/getConfigFeeItemList",
      url_Post_addConfigFeeItem: "http://localhost:8080/addConfigFeeItem",
      url_Post_deleteConfigFeeItemById:
        "http://localhost:8080/deleteConfigFeeItemById",
      url_Post_modifyConfigFeeItemById:
        "http://localhost:8080/modifyConfigFeeItemById",

      // 搜索框搜索数据的表单
      SearchForm: {
        searchByItemType: "",
        searchByItemName: "",
      },

      // 搜索框下拉 需要根据收费类型及时调整
      typeMap: {
        "常规收费项(商铺)": "house",
        临时收费项: "temp",
        押金类收费项: "deposit",
      },

      // 添加对话框显隐
      dialogFormVisible: false,
      dialogModifyVisible: false,
      dialogVisible: false,

      // 表格数据
      tableData: [],

      // 分页数据
      pageNum: 1,
      pageSize: 5,
      total: 0,

      ruleForm: {
        ItemType: "",
        ItemName: "",
        price: "",
        numType: "",
        period: "",
        lateFeeEnable: "",
      },

      ruleModifyForm: {},

      deleteItemById: "",

      periodMap: {
        "1个月": "1",
        "2个月": "2",
        "3个月": "3",
        "4个月": "4",
        "6个月": "6",
        "12个月": "12",
      },

      numType: {
        按户数收费: "meter",
        按占地面积收费: "building_area",
        按走表量收费: "flat",
        按租金收费: "rent_fee",
      },

      // 校验规则
      rules: {
        ItemType: [
          { required: true, message: "请输入公司名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        ItemName: [
          { required: true, message: "请选择收费项目", trigger: "change" },
          { min: 2, max: 10, message: "长度在 2到 10 个字符", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入公司名", trigger: "blur" }],
        numType: [
          { required: true, message: "请输入性别", trigger: "blur" },
          { min: 1, max: 1, message: "长度为1位", trigger: "blur" },
        ],
        period: [{ required: true, message: "请输入性别", trigger: "blur" }],
        lateFeeEnable: [
          { required: true, message: "请输入性别", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 分页
    handleSizeChange(val) {
      this.getConfigFeeItemList(
        this.pageNum,
        val,
        this.SearchForm.searchByItemType,
        this.SearchForm.searchByItemName
      );
    },
    handleCurrentChange(val) {
      this.getConfigFeeItemList(
        val,
        this.pageSize,
        this.SearchForm.searchByItemType,
        this.SearchForm.searchByItemName
      );
    },

    // 搜索数据
    searchMassage() {
      this.getConfigFeeItemList(
        this.pageNum,
        this.pageSize,
        this.typeMap[this.SearchForm.searchByItemType],
        this.SearchForm.searchByItemName
      );
    },

    // 添加数据
    submitForm() {
      this.$http
        .post(this.url_Post_addConfigFeeItem, {
          ItemType: this.typeMap[this.ruleForm.ItemType],
          ItemName: this.ruleForm.ItemName,
          price: this.ruleForm.price,
          numType: this.numType[this.ruleForm.numType],
          period: this.ruleForm.period,
          lateFeeEnable: this.ruleForm.lateFeeEnable,
        })
        .then((result) => {
          this.dialogFormVisible = false;
          this.getConfigFeeItemList(this.pageNum, this.pageSize, "", "");
          this.$message({
            message: "添加成功",
            type: "success",
          });
        });
    },

    // 点击添加对话框之前清空表
    beforeAddOwnerUser() {
      if (this.dialogFormVisible == false) {
        this.dialogFormVisible = true;
      } else {
        this.dialogFormVisible = false;
      }

      (this.ruleForm.ItemType = ""),
        (this.ruleForm.ItemName = ""),
        (this.ruleForm.price = ""),
        (this.ruleForm.numType = ""),
        (this.ruleForm.period = ""),
        (this.ruleForm.lateFeeEnable = "");
    },

    // 重置字段
    resetFields() {
      (this.SearchForm.searchByItemType = ""),
        (this.SearchForm.searchByItemName = ""),
        this.getConfigFeeItemList(1, 10, "", "");
    },

    // 获取数据
    getConfigFeeItemList(pageNum, pageSize, type, name) {
      this.$http
        .get(this.url_Get_getConfigFeeItemList, {
          params: {
            pageNum: pageNum,
            pageSize: pageSize,
            type: type,
            name: name,
          },
        })
        .then((result) => {
          this.tableData = result.data.data.list;
          console.log(result);

          this.pageNum = result.data.data.pageNum;
          this.pageSize = result.data.data.pageSize;
          this.total = result.data.data.total;
        })
        .catch((err) => {
          this.$message({
            message: "获取数据出错了",
            type: "error",
          });
        });
    },

    // 编辑、修改数据
    beroreSubmitModifyForm(row) {
      this.ruleModifyForm = row;
    },
    submitModifyForm() {
      // 修改numtype
      this.ruleModifyForm.numType = this.numType[this.ruleModifyForm.numType];

      // 修改期限
      this.ruleModifyForm.period = this.periodMap[this.ruleModifyForm.period];
      // 修改type
      this.ruleModifyForm.type = this.typeMap[this.ruleModifyForm.type];

      console.log(this.ruleModifyForm.numType);
      console.log(this.ruleModifyForm.period);
      console.log(this.ruleModifyForm.type);

      this.$http
        .post(this.url_Post_modifyConfigFeeItemById, this.ruleModifyForm)
        .then((result) => {
          this.dialogModifyVisible = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
        });
    },

    beforeDeleteItemById(row) {

      this.deleteItemById = row.id;
      
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.handleClick();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

    },

    // 根据id删除数据
    handleClick() {
      this.$http
        .get(this.url_Post_deleteConfigFeeItemById, {
          params: {
            id: this.deleteItemById,
          },
        })
        .then((result) => {
          this.getConfigFeeItemList(this.pageNum, this.pageSize, "", "");
        })
        .catch((err) => {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        });
    },
  },

  computed: {
    typeKeys() {
      return Object.keys(this.typeMap);
    },
    selectedItemValue() {
      return this.typeMap[this.SearchForm.searchByItemType];
    },
    mapKeys() {
      return Object.keys(this.numType);
    },
    periodMapKeys() {
      return Object.keys(this.periodMap);
    },
  },
  mounted() {
    console.log("访问到了");

    this.getConfigFeeItemList(this.pageNum, this.pageSize, "", "");
  },
};
</script>

<style>
</style>